<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<link rel="stylesheet" href="S.css" />
</head>
<body>
	<div class="s-slider x">
		<div class="s-slider-range" id="r1"></div>
		<div class="s-slider-bar"  id="x1"></div>	
	</div>
	
	<br>
	<br>
	
	<div class="s-slider y">
		<div class="s-slider-range" id="r2"></div>
		<div class="s-slider-bar"  id="x2"></div>	
	</div>
	
</body>
<script type="text/javascript" src="../jquery.min.js"></script>
<script type="text/javascript" src="S.js"></script>
<script type="text/javascript">
	new S.Dragable({
		axis:'x',
		el:S.E('x1'),
		region:{
			left:0,
			right:'100%'
		},
		moving:function(pos){
			var width = $(this.handle).parent().width()-$(this.handle).width();
			width = parseFloat(width,10);
			console.log(parseInt(pos.left/width *100));
			$('#r1').css('width',pos.left);
		}
	});
	new S.Dragable({
		axis:'y',
		el:S.E('x2'),
		region:{
			top:0,
			bottom:'100%'
		},
		moving:function(pos){
			var width = $(this.handle).parent().height()-$(this.handle).height();
			width = parseFloat(width,10);
			console.log(parseInt(pos.top/width *100));
			$('#r2').css('height',pos.top);
		}
	});
</script>
</html>